<template>
	<div class="bottom-bar">
		<div class="checkBox">
			<check-button 
				class="checkBtn"
				:is-checked="isSelectAll"
				@click.native="checkClick">
			</check-button>
			<span>全选</span>
		</div>
		<div class="totalPrice">
			合计：￥{{totalPrice}}
		</div>
		<div class="calculate" @click="calcClick">
			去计算({{checkedLength}})
		</div>
	</div>
</template>

<script>
	import CheckButton from'components/content/checkButton/CheckButton.vue'
	
	export default {
		name:"CartBottomBar",
		components: {
			CheckButton
		},
		computed: {
			totalPrice(){
				return this.$store.state.cartList.filter(item => {
					return item.checked
				}).reduce((preValue, item) => {
					return preValue + item.price * item.count
				}, 0).toFixed(2)
			},
			checkedLength(){
				return this.$store.state.cartList.filter(item => item.checked).length
			},
			isSelectAll(){
				if(this.$store.state.cartList.length === 0){
					return false
				}else{
					return !this.$store.state.cartList.find(item => !item.checked)
				}
				//return !(this.$store.state.cartList.filter(item => !item.checked).length)
			}
		},
		methods: {
			checkClick(){
				//console.log('~~~')
				if(this.isSelectAll){
					this.$store.state.cartList.forEach(item => item.checked = false)
				}else{
					this.$store.state.cartList.forEach(item => item.checked = true)
				}
			},
			calcClick(){
				if(!this.isSelectAll){
					this.$toast.show('请选择购买的商品', 2000)
				}
			}
		}
	}
</script>

<style scoped="scoped">
	.bottom-bar {
		height: 40px;
		background-color: #eee;
		
		position: absolute;
		bottom: 49px;
		left: 0;
		right: 0;
		
		line-height: 40px;
		
		display: flex;
	}
	.checkBox {
		display: flex;
		align-items: center;
		margin-left: 10px;
		width: 60px;
	}
	.checkBtn {
		height: 20px;
		width: 20px;
		line-height: 20px;
		margin-right: 5px;
	}
	.totalPrice {
		margin-left: 30px;
		flex: 1;
	}
	.calculate {
		width: 90px;
		background-color: red;
		color: #fff;
		text-align: center;
	}
</style>
